<template>
  <div class="app-container">
<!--    {{title}}-->
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" :title="title+'详情'" disabled @closed="createClose" :visible.sync="open" size="65%" append-to-body >
      <el-form v-loading = "loading" disabled ref="form" :model="form" label-width="110px" class="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="店铺账户" prop="shopId">
              <el-select @change="$forceUpdate()" filterable v-model="form.shopId" placeholder="请选择店铺账户" clearable style="width: 240px" >
                <el-option v-for="item in shopList" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费率" prop="feeRate">
              <el-input-number :step="0.1" :min="0" :max="15" :precision="2" v-model.number="form.feeRate" placeholder="请输入费率" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="请求单号" prop="requestId">
              <el-input v-model="form.requestId" :maxlength="80" placeholder="请输入请求单号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="二级商户号" prop="subMerchantId">
              <el-input v-model="form.subMerchantId" :maxlength="80" placeholder="请输入二级商户号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户银行号" prop="accountNumber">
              <el-input v-model="form.accountNumber" :maxlength="80" placeholder="请输入开户银行号" />
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="状态" prop="subMerchantId">
              {{form.status===1?"待提交":form.status===2?"审核中":form.status===3?"审核通过":form.status===4?"审核驳回":form.status===5?"入网成功":""}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签约状态" prop="signingStatus">
              {{form.signingStatus===0?"待签约":form.signingStatus===1?"签约中":form.signingStatus===2?"签约失败":form.signingStatus===3?"签约成功":""}}
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="驳回原因" prop="reason">
              <el-input v-model="form.reason" :maxlength="80" placeholder="请输入驳回原因" />
            </el-form-item>
          </el-col>

        </el-row>

        <el-divider content-position="left">资质信息</el-divider>
        <el-form-item label="商户类型" prop="registerRole">
          <el-select @change="handRegisterRoleChange" v-model="form.registerRole" placeholder="请选择商户类型" clearable style="width: 240px" >
            <el-option label="企业" value="ENTERPRISE_LEGAL_PERSON" />
            <el-option label="个体户" value="INDIVIDUAL_BUSINESS" />
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicenseImg">
          <PayEaseFileUpload @input="handUploadImg" keys="businessLicensePath" :path="form.businessLicensePath" :limit="1" v-model="form.businessLicenseImg"></PayEaseFileUpload>
        </el-form-item>

        <el-row>
          <el-col :span="8">
            <el-form-item label="门店门头照片" prop="storeHeaderImg">
              <PayEaseFileUpload @input="handUploadImg" keys="storeHeaderPath" :path="form.storeHeaderPath" :limit="1" v-model="form.storeHeaderImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店内场景照片" prop="storeIndoorImg">
              <PayEaseFileUpload @input="handUploadImg" keys="storeIndoorPath" :path="form.storeIndoorPath" :limit="1" v-model="form.storeIndoorImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="其他资质" prop="otherCerImg">
              <PayEaseFileUpload :fileType="['pdf']" type="pdf" :fileSize="2" @input="handUploadImg" keys="otherCerPath" :path="form.otherCerPath" :limit="1" v-model="form.otherCerImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="公司全称" prop="signedName">
              <name-input v-model="form.signedName" :maxlength="80" placeholder="请输入营业执照全称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店铺名称" prop="signedShorthand">
              <name-input v-model="form.signedShorthand" :maxlength="20" placeholder="请输入店铺名称" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="社会统一信用代码" prop="cerNo" label-width="140px">
              <el-input v-model="form.cerNo" :maxlength="20" placeholder="请输入社会统一信用代码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="业务分类" prop="businessClassification">
              <el-cascader v-model="form.businessClassification" :options="classificationList" :props="{label:'name',value:'value'}" :show-all-levels="false"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row >
          <el-form-item label="省市区" prop="businessAddressProvince">
            <el-col :span="7">
              <el-form-item prop="businessAddressProvince">
                <el-select @change="handBusinessAddressProvince" v-model="form.businessAddressProvince" placeholder="请选择省" clearable style="width: 100%" >
                  <el-option v-for="item in businessAddressProvince" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1"> <div style="text-align: center">-</div> </el-col>
            <el-col :span="7">
              <el-form-item prop="businessAddressCity">
                <el-select @change="handBusinessAddressCity" v-model="form.businessAddressCity" placeholder="请选择市" clearable style="width: 100%" >
                  <el-option v-for="item in businessAddressCity" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1"> <div style="text-align: center">-</div> </el-col>
            <el-col :span="7">
              <el-form-item prop="businessAddressArea">
                <el-select @change="handBusinessAddressArea" v-model="form.businessAddressArea" placeholder="请选择县/区" clearable style="width: 100%" >
                  <el-option v-for="item in businessAddressArea" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="详细地址" prop="businessAddress">
              <el-input v-model="form.businessAddress" :maxlength="200" placeholder="请输入营业执照注册详细地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">银行信息</el-divider>

        <el-form-item label="结算类型" prop="accountType">
          <el-select @change="$forceUpdate()" v-model="form.accountType" placeholder="请选择结算类型" clearable style="width: 240px" >
            <el-option label="对公" value="PUBLIC" />
            <el-option v-if="!form.registerRole || form.registerRole === 'INDIVIDUAL_BUSINESS'" label="对私" value="PRIVATE" />
          </el-select>
        </el-form-item>

        <el-row>
          <el-col :span="8" v-if="form.accountType === 'PUBLIC'">
            <el-form-item label="开户许可证" prop="openAccountImg">
              <PayEaseFileUpload :isShowTip="false" @input="handUploadImg" keys="openAccountPath" :path="form.openAccountPath" :limit="1" v-model="form.openAccountImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-else-if="form.accountType === 'PRIVATE'">
            <el-form-item label-width="130px" label="法人银行卡照片" prop="legalPersonBankCardImg">
              <PayEaseFileUpload :isShowTip="false" @input="handUploadImg" keys="legalPersonBankCardPath" :path="form.legalPersonBankCardPath" :limit="1" v-model="form.legalPersonBankCardImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item :label="form.accountType === 'PUBLIC'?'账户名称':'法人名字'" prop="accountName">
              <el-input v-model="form.accountName" :maxlength="80" placeholder="请输入开户人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行名称" prop="bankName">
              <el-input v-model="form.bankName" :maxlength="50" placeholder="请输入开户行名称" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="支行名称" prop="bankBranchName">
              <el-input v-model="form.bankBranchName" :maxlength="80" placeholder="请输入支行名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item :label="form.accountType === 'PUBLIC'?'对公账号':'法人银行卡号'" prop="bankCardNo">
              <el-input v-model="form.bankCardNo" :placeholder="form.accountType === 'PUBLIC'?'请输入对公账号':'请输入法人银行卡号'" :maxlength="80" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-form-item label="银行省市区" prop="provinceCode">
            <el-col :span="11">
              <el-form-item prop="provinceCode">
                <el-select  @change="handProvinceCode"  v-model="form.provinceCode" placeholder="请选择省" clearable style="width: 100%" >
                  <el-option v-for="item in businessAddressProvince" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1"> <div style="text-align: center">-</div> </el-col>
            <el-col :span="11">
              <el-form-item prop="cityCode">
                <el-select @change="handCityCode" v-model="form.cityCode" placeholder="请选择市" clearable style="width: 100%" >
                  <el-option v-for="item in cityCode" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-row>




        <el-divider content-position="left">法人信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="100px" label="身份证正面（人像面）" prop="legalIdCardProsImg">
              <PayEaseFileUpload @input="handUploadImg" keys="legalIdCardProsPath" :path="form.legalIdCardProsPath" :limit="1" v-model="form.legalIdCardProsImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="100px" label="身份证反面（国徽面）" prop="legalIdCardConsImg">
              <PayEaseFileUpload @input="handUploadImg" keys="legalIdCardConsPath" :path="form.legalIdCardConsPath" :limit="1" v-model="form.legalIdCardConsImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="100px" label="手持身份证" prop="holdingIdCardImg">
              <PayEaseFileUpload @input="handUploadImg" keys="holdingIdCardPath" :path="form.holdingIdCardPath" :limit="1" v-model="form.holdingIdCardImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="8">
            <el-form-item label="法人姓名" prop="legalPersonName">
              <el-input v-model="form.legalPersonName" :maxlength="50" placeholder="请输入法人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码" prop="legalPersonIdNo">
              <el-input v-model="form.legalPersonIdNo" placeholder="请输入法人证件号码" :maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="法人手机号" prop="legalPersonPhone">
              <el-input v-model="form.legalPersonPhone" placeholder="请输入法人手机号" :maxlength="11"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人邮箱" prop="contactEmail">
              <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱" :maxlength="100"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="法人职业" prop="profession">
              <el-select @change="$forceUpdate()" filterable v-model="form.profession" placeholder="请选择法人职业" clearable style="width: 240px" >
                <el-option v-for="item in careerList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-form-item label="证件日期" prop="idEffectiveDateStart">
            <el-col :span="11">
              <el-form-item prop="idEffectiveDateStart">
                <el-date-picker type="date" v-model="form.idEffectiveDateStart" placeholder="请选择法人证件有效期开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1"> <div style="text-align: center">-</div> </el-col>
            <el-col :span="11">
             <el-row :gutter="10">
               <el-col :span="22">
<!--                 :pickerOptions="{-->
<!--                 disabledDate(time) {-->
<!--                 return time.getTime() ;-->
<!--                 }-->
<!--                 }"-->
                 <el-form-item prop="idEffectiveDateEnd">
                  <el-date-picker type="date" :disabled="form.isLongTerm === 1" v-model="form.idEffectiveDateEnd" placeholder="请选择法人证件有效期结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                 </el-form-item>
               </el-col>
               <el-col :span="1">
                 <el-checkbox :true-label="1" :false-label="0" @change="handLongTerm" v-model="form.isLongTerm">长期</el-checkbox>
               </el-col>
             </el-row>
            </el-col>
          </el-form-item>
        </el-row>

        <el-divider content-position="left">场景</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易场景" prop="tradingScenarios">
              <el-select @change="$forceUpdate()" filterable v-model="form.tradingScenarios" placeholder="请选择交易场景" clearable style="width: 100%" >
                <el-option label="App" value="App" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-show="form.tradingScenarios==='App'">
            <el-form-item label="App名称	" prop="appName">
              <el-input v-model="form.appName" :maxlength="80" placeholder="请输入App名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label-width="120px" label="APP首页截图" prop="appImg" v-show="form.tradingScenarios==='App'">
          <PayEaseFileUpload :isShowTip="false" @input="handUploadImg" keys="appPath" :path="form.appPath" :limit="1" v-model="form.appImg"></PayEaseFileUpload>
        </el-form-item>


        <el-divider content-position="left">最终受益人信息</el-divider>
        <div class="certificateContacts">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTab">添加</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteTab">删除</el-button>
            </el-col>
          </el-row>
            <el-table :data="form.certificateContacts" :row-class-name="rowTabIndex" c @selection-change="handleAddTabSelectionChange" ref="table">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column label="收益人姓名" prop="name" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'certificateContacts.'+scope.$index + '.name'" :rules="{
                      required: true,
                      message: '名称不能为空',
                      trigger: 'blur',
                    }">
                    <el-input v-model="scope.row.name" :maxlength="50" placeholder="请输入收益人姓名" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="证件类型" prop="idType" align="center" width="160">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'certificateContacts.'+scope.$index + '.idType'" :rules="{
                      required: true,
                      message: '请选择证件类型',
                      trigger: 'change',
                    }">
                    <el-select @change="$forceUpdate()" v-model="scope.row.idType" placeholder="请选择证件类型" clearable >
                      <el-option label="身份证" value="IDCARD" />
                      <el-option label="护照" value="PASSPORT" />
                      <el-option label="军官证" value="OFFICERPASS" />
                      <el-option label="武警证" value="ARMEDPOLICE" />
                      <el-option label="港澳居民往来内地通行证" value="HM_VISITORPASS" />
                      <el-option label="户口簿" value="RESIDENCEBOOKLET" />
                      <el-option label="台湾居民来往大陆通行证" value="T_VISITORPASS"/>
                      <el-option label="外国人永久居留证" value="FOREIGNESTAYFOREVER" />
                      <el-option label="其它证件号" value="OTHER" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="受益人证件号码" prop="idNo" width="195" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'certificateContacts.'+scope.$index + '.idNo'" :rules="[{
                      required: true,
                      message: '受益人证件号码不能为空',
                      trigger: 'blur',
                    },{ pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dXx]$/, message: '受益人证件号码格式不正确', trigger: 'blur' }]">
                    <el-input v-model="scope.row.idNo" :maxlength="20" placeholder="请输入受益人证件号码" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="证件有效期开始日期" width="160" prop="effectiveDateStart" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'certificateContacts.'+scope.$index + '.effectiveDateStart'" :rules="{
                      required: true,
                      message: '请选择证件有效期开始日期',
                      trigger: 'change',
                    }">
                    <el-date-picker type="date" v-model="scope.row.effectiveDateStart" placeholder="请选择证件有效期开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="证件有效期结束日期" width="160" prop="effectiveDateEnd" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'certificateContacts.'+scope.$index + '.effectiveDateEnd'" :rules="{
                      required: true,
                      message: '请选择证件有效期结束日期',
                      trigger: 'change',
                    }">
                    <el-date-picker type="date" v-model="scope.row.effectiveDateEnd" placeholder="请选择证件有效期结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="受益人住址" align="center" prop="address">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'certificateContacts.'+scope.$index + '.address'" :rules="{
                      required: true,
                      message: '受益人住址不能为空',
                      trigger: 'blur',
                    }">
                    <el-input v-model="scope.row.address" :maxlength="200" placeholder="请输入受益人住址" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="股权占比" width="150" align="center" prop="equityRatio">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'certificateContacts.'+scope.$index + '.equityRatio'" :rules="{
                      required: true,
                      message: '股权占比不能为空',
                      trigger: 'blur',
                    }">
                    <el-input-number :step="0.1" :min="0" :max="100" size="mini" :precision="2" v-model="scope.row.equityRatio" placeholder="请输入股权占比" />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>

        </div>

        <el-divider content-position="left">其他</el-divider>
        <el-form-item label-width="100px" label="上下游协议" prop="agreementImg">
          <PayEaseFileUpload @input="handUploadImg" keys="agreementPath" :path="form.agreementPath" :limit="10" v-model="form.agreementImg"/>
        </el-form-item>
      </el-form>
      <div class="footer-operation">
        <el-button @click="initialization();open = false">返回</el-button>
        <el-button :loading="loading" v-if="form.status !== 1" :disabled="form.accountNumber != null" type="primary" v-hasPermi="['ecs:payEase:queryDetail']" @click="query">查询</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script >
// 图片上传组件
import PayEaseFileUpload from "@/components/payEaseFileUpload"
import {
  addPayEase,
  getCity,
  incoming,
  updatePayEase,
  payEaseClassificationList,
  payEaseCareerList,
  queryDetail
} from '@/api/ecs/payEase'
import { listShop } from "@/api/ecs/shop";

export default {
  name:"PayEaseDetail",
  props:{
    opens:{
      type:Boolean,
      default:false
    },
    title:{
      type:String,
      default:"蓝海银行"
    },
    formData:{
      type:Object,
      default:{}
    }
  },
  components: {
    PayEaseFileUpload
  },
  data() {
    return{
      open:false,
      form: {
        registerRole: null,
        accountType: null,
      },
      isRefresh:false,
      shopList:[],
      cityCode:[],
      careerList:[],
      checkedTab:[],
      loading:false,
      classificationList:[],
      // certificateContacts:[],
      businessAddressArea:[],
      businessAddressCity:[],
      businessAddressProvince:[],
    }
  },
  created(){
    this.handleAddTab()
  },
  methods: {
    initialization(){
      this.form = {
        productId:1,
        feeRate:0,
        registerRole: null,
        signedName: null,
        signedShorthand: null,
        businessLicensePath: null,
        cerNo: null,
        businessAddressProvince: null,
        businessAddressCity: null,
        businessAddressArea: null,
        businessAddress: null,
        businessClassification: null,
        accountType: null,
        accountName: null,
        bankName: null,
        bankBranchName: null,
        bankCardNo: null,
        provinceCode: null,
        cityCode: null,
        bankProvince: null,
        bankCity: null,
        openAccountPath: null,
        legalPersonBankCardPath: null,
        legalIdCardProsPath: null,
        legalIdCardConsPath: null,
        holdingIdCardPath: null,
        legalPersonName: null,
        legalPersonPhone: null,
        contactEmail: null,
        legalPersonIdNo: null,
        idEffectiveDateStart: null,
        idEffectiveDateEnd: null,
        profession: null,
        isLongTerm: null,
        agreementPath: null,
        certificateContacts: [],
        tradingScenarios: null,
        appName: null,
        appPath: null,
        storeHeaderPath: null,
        storeIndoorPath: null,
        otherCerPath: null,
        rate: null,
        status: null,
        accountNumber: null,
        shopId:null
      }
    },
    handRegisterRoleChange(val){
      if (val === "ENTERPRISE_LEGAL_PERSON"){
        this.$set(this.form, 'accountType',"PUBLIC"); //正确赋值
      }else if(val === "INDIVIDUAL_BUSINESS"){
        this.$set(this.form, 'accountType',null); //正确赋值
      }
    },
    rowTabIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    handleAddTabSelectionChange(selection) {
      this.checkedTab = selection.map(item => item.index)
    },
    handleAddTab() {
      this.form.certificateContacts.push({"name":null,"idType":null,"dNo":null,"effectiveDateStart":null,"effectiveDateEnd":null,"address":null,"equityRatio":null});
    },
    handleDeleteTab() {
      if (this.checkedTab.length === 0) {
        this.$modal.msgError("请先选择要删除的最终受益人信息");
      } else {
        if (this.form.certificateContacts.length <= this.checkedTab.length){
          this.$modal.msgError("最少需要保留一个最终受益人信息");
          return;
        }
        const certificateContacts = this.form.certificateContacts;
        const checkedTab = this.checkedTab;
        this.form.certificateContacts = certificateContacts.filter(function(item) {
          return checkedTab.indexOf(item.index) === -1
        });
      }
    },
    handLongTerm(val){
      if(val === 1){
        this.form.idEffectiveDateEnd = "2099-12-31"
      }else{
        this.form.idEffectiveDateEnd = ""
      }
    },
    handBusinessAddressProvince(val){
      if (val){
        this.$set(this.form, 'businessAddressCity', null); //正确赋值
        this.$set(this.form, 'businessAddressProvinces', null); //正确赋值
        this.handBusinessAddressCity()
        this.loading = true

        this.businessAddressProvince.map(item => {
          if (item.code === val){
            this.$set(this.form, 'businessAddressProvinces', item.name); //正确赋值
          }
        })

        getCity({code:val}).then(res=>{
          this.businessAddressCity = JSON.parse(res.data)
          this.loading = false
        })
      }else{
        this.businessAddressCity = []
      }
    },
    handBusinessAddressCity(val){
      this.$set(this.form, 'businessAddressArea', null);
      this.$set(this.form, 'businessAddressCitys', null);
      if(val){
        this.loading = true
        this.businessAddressCity.map(item => {
          if (item.code === val){
            this.$set(this.form, 'businessAddressCitys', item.name);
          }
        })
        getCity({code:val}).then(res=>{
          this.businessAddressArea = JSON.parse(res.data)
          this.loading = false
        })
      }else{
        this.businessAddressArea = []
      }
    },

    handBusinessAddressArea(val){
      this.$set(this.form, 'businessAddressAreas', null);
      if(val){
        this.businessAddressArea.map(item => {
          if (item.code === val){
            this.$set(this.form, 'businessAddressAreas', item.name);
          }
        })
      }
    },

    handProvinceCode(val){
      this.$set(this.form, 'cityCode', null);
      this.$set(this.form, 'bankProvince', null);
      if(val){
        this.loading = true
        this.businessAddressProvince.map(item => {
          if (item.code === val){
            this.$set(this.form, 'bankProvince', item.name);
          }
        })
        getCity({code:val}).then(res=>{
          this.cityCode = JSON.parse(res.data)
          this.loading = false
        })
      }else{
        this.cityCode = []
      }
    },
    handCityCode(val){
      this.$set(this.form, 'bankCity', null);
      if(val){
        this.cityCode.map(item => {
          if (item.code === val){
            this.$set(this.form, 'bankCity', item.name);
          }
        })
      }
    },
    handUploadImg(val1,val2,val3){
      this.form[val2] = val3
    },
    submitForm() {

          if (this.form.businessClassification){
            if (this.form.businessClassification.length === 2){
              this.form.businessClassification = this.form.businessClassification[1]
            }
          }
          this.form.productId = 1
          if (this.form.id != null) {
            updatePayEase(this.form).then(response => {
              if (response.code === 200){
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.isRefresh = true
              }else{
                this.loading = false
              }
            }).catch(()=>{
              this.loading = false
            });
          } else {
            addPayEase(this.form).then(response => {
              if (response.code === 200){
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.isRefresh = true
              }else{
                this.loading = false
              }
            }).catch(()=>{
              this.loading = false
            });
          }
    },
    submit(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.certificateContacts.length === 0){
            this.$modal.msgError("请填写最终受益人信息");
            return
          }
          this.loading = true
          if (this.form.businessClassification.length === 2){
            this.form.businessClassification = this.form.businessClassification[1]
          }
          this.form.productId = 1
          incoming(this.form).then(res=>{
            if (res.code === 200){
              this.$modal.msgSuccess("提交成功");
              this.open = false;
              this.isRefresh = true
            }else{
              this.loading = false
            }
          }).catch(()=>{
            this.loading = false
          })
        }
      });
    },
    query(){
      this.loading = true
      queryDetail(this.form.id).then(res=>{
        if(res.code === 200){
          this.form = res.data
          this.loading = false
        }
      }).catch(()=>{
        this.loading = false
      })
    },
    createClose(){
      this.initialization()
      this.open = false
      this.$emit("close",false,this.isRefresh)
    }
  },
  watch:{
    opens:{
      handler(val){
        this.open = val
        getCity().then(res=>{
          this.businessAddressProvince = JSON.parse(res.data)
        })
        payEaseCareerList().then(res => {
          this.careerList = res.data;
        })
        payEaseClassificationList().then(response => {
          this.classificationList = this.handleTree(response.data, "id", "parentId");
        })
      },
      deep:true,
      immediate:true
    },
    formData:{
      handler(val){
        let data = {...val}
        this.form = val
        if(val.id){

          listShop({page:1,pageSize:100000}).then(res => {
            this.shopList = res.rows
          })

          this.handBusinessAddressProvince(val.businessAddressProvince)
          this.form.businessAddressCity = data.businessAddressCity
          this.handBusinessAddressCity(data.businessAddressCity)
          this.form.businessAddressArea = data.businessAddressArea
          this.handBusinessAddressArea(data.businessAddressArea)

          this.handProvinceCode(val.provinceCode)
          this.form.cityCode = data.cityCode
          this.handCityCode(data.cityCode)
        }
      },
      // deep:true,
      immediate:true
    },
    title:{
    //   handle(val){
    //   },
    //   deep:true,
    //   immediate:true,
    }
  }
}
</script>



<style scoped lang="scss">
  ::v-deep .el-drawer__header{
    font-weight: 900;
    font-size: 18px;
  }
  .certificateContacts{
    padding: 0 20px;
  }
  ::v-deep .el-date-editor.el-input{
    width: 100%;
  }
  ::v-deep .el-checkbox__label{
    padding-left: 4px;
  }
  .form{
    padding-bottom: 80px;
  }
  .footer-operation{
    bottom: 0;
    width: 100%;
    height: 80px;
    display: flex;
    z-index:10000;
    padding: 0 20px;
    text-align: center;
    position: absolute;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid #EBEEF5;
    .el-button{
      width: 100%;
    }
  }
</style>
